<%--
  Created by IntelliJ IDEA.
  User: LH
  Date: 2022/12/17
  Time: 16:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="js/echarts.js"></script>
    <script src="js/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        $(function (){
            var chartDom = document.getElementById('main');
            var myChart = echarts.init(chartDom);
            var option;
            $.ajax({
                url:"http://localhost:8080/lab15/student",
                type:'get',
                dataType:'json',
                success:function (data){
                    alert(data.gender);
                    option = {
                        xAxis: {
                            type: 'category',
                            data: data.gender,
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                data: data.pNums,
                                type: 'bar',
                                showBackground: true,
                                backgroundStyle: {
                                    color: 'rgba(180, 180, 180, 0.2)'
                                }
                            }
                        ]
                    };
                    myChart.setOption(option);
                }
            });

        });

    </script>
</head>

<body>
<div id="main" style="width: 600px;height: 800px" ></div>
</body>
</html>
